<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星座测试统计</title>
    <link rel="stylesheet" href="style.css">
    <!-- 引入Chart.js库 -->
    <script src="chart.js"></script>
    <!-- 引入自定义图表脚本 -->
    <script src="charts.js"></script>
</head>
<body>
    <div class="page">
        <!-- 内容容器 -->
        <div class="content-container">
            <!-- Tab导航 -->
            <div class="tab-bar">
                <div class="tab-container">
                    <button class="tab active" data-tab="personality">
                        性格
                        <div class="tab-indicator"></div>
                    </button>
                    <button class="tab" data-tab="love">
                        爱情
                        <div class="tab-indicator"></div>
                    </button>
                    <button class="tab" data-tab="career">
                        职业
                        <div class="tab-indicator"></div>
                    </button>
                    <button class="tab" data-tab="lifestyle">
                        生活
                        <div class="tab-indicator"></div>
                    </button>
                </div>
            </div>
            <!-- 主内容区 -->
            <main>
                <!-- 性格分析内容 -->
                <div id="personality-content" class="tab-content active">
                    <!-- 头部信息 -->
                    <div class="card">
                        <h1>星座性格分析</h1>
                        <p>探索不同星座的性格特征与行为模式</p>
                    </div>

                    <!-- 星座性格特征雷达图 -->
                    <div class="card">
                        <h2>十二星座性格特征雷达图</h2>
                        <div class="chart-container" style="height: 400px;"></div>
                    </div>

                    <!-- 星座性格统计图表 -->
                    <div class="card">
                        <h2>星座主要性格特征分布</h2>
                        <div class="progress-container">
                            <div class="progress-item">
                                <div class="progress-label">外向性</div>
                                <div class="progress-bar">
                                    <div class="progress-fill" style="width: 100%; background: linear-gradient(90deg, #FF6B6B, #FF3B30);"></div>
                                </div>
                                <div class="progress-value" style="color: #FF3B30;">白羊座最高</div>
                            </div>
                            <div class="progress-item">
                                <div class="progress-label">宜人度</div>
                                <div class="progress-bar">
                                    <div class="progress-fill" style="width: 95%; background: linear-gradient(90deg, #4ECDC4, #45B7D1);"></div>
                                </div>
                                <div class="progress-value" style="color: #45B7D1;">天秤座最高</div>
                            </div>
                            <div class="progress-item">
                                <div class="progress-label">尽责性</div>
                                <div class="progress-bar">
                                    <div class="progress-fill" style="width: 90%; background: linear-gradient(90deg, #96CEB4, #6AB04C);"></div>
                                </div>
                                <div class="progress-value" style="color: #6AB04C;">处女座最高</div>
                            </div>
                            <div class="progress-item">
                                <div class="progress-label">神经质</div>
                                <div class="progress-bar">
                                    <div class="progress-fill" style="width: 98%; background: linear-gradient(90deg, #DDA0DD, #9370DB);"></div>
                                </div>
                                <div class="progress-value" style="color: #9370DB;">巨蟹座最高</div>
                            </div>
                            <div class="progress-item">
                                <div class="progress-label">开放性</div>
                                <div class="progress-bar">
                                    <div class="progress-fill" style="width: 100%; background: linear-gradient(90deg, #87CEFA, #00BFFF);"></div>
                                </div>
                                <div class="progress-value" style="color: #00BFFF;">水瓶座最高</div>
                            </div>
                        </div>
                        
                        <!-- 统计发现 -->
                        <div class="stats-discoveries">
                            <h3>统计发现</h3>
                            <ul>
                                <li><span class="star-fire"></span> 火象星座（白羊、狮子、射手）在"外向性"维度得分显著高于其他星座</li>
                                <li><span class="star-earth"></span> 土象星座（金牛、处女、摩羯）在"尽责性"维度表现突出</li>
                                <li><span class="star-air"></span> 风象星座（双子、天秤、水瓶）在"开放性"维度得分较高</li>
                                <li><span class="star-water"></span> 水象星座（巨蟹、天蝎、双鱼）在"神经质"维度得分普遍偏高</li>
                            </ul>
                        </div>
                    </div>

                    <!-- 星座性格特点列表 -->
                    <div class="card">
                        <h2>星座性格特点</h2>
                        <div class="feature-list">
                            <div class="feature-item">
                                <h3>白羊座</h3>
                                <p>热情、勇敢、冲动、自信、领导力强</p>
                            </div>
                            <div class="feature-item">
                                <h3>金牛座</h3>
                                <p>稳重、务实、执着、有耐心、物质主义</p>
                            </div>
                            <div class="feature-item">
                                <h3>双子座</h3>
                                <p>机智、灵活、善变、好奇、善于沟通</p>
                            </div>
                            <div class="feature-item">
                                <h3>巨蟹座</h3>
                                <p>敏感、情绪化、有爱心、家庭观念强、保护欲强</p>
                            </div>
                            <div class="feature-item">
                                <h3>狮子座</h3>
                                <p>自信、慷慨、领导才能、戏剧性、爱面子</p>
                            </div>
                            <div class="feature-item">
                                <h3>处女座</h3>
                                <p>完美主义、细致、勤奋、分析能力强、挑剔</p>
                            </div>
                            <div class="feature-item">
                                <h3>天秤座</h3>
                                <p>公平、和谐、优雅、社交能力强、犹豫不决</p>
                            </div>
                            <div class="feature-item">
                                <h3>天蝎座</h3>
                                <p>神秘、深情、意志力强、直觉敏锐、占有欲强</p>
                            </div>
                            <div class="feature-item">
                                <h3>射手座</h3>
                                <p>乐观、自由、冒险精神、幽默、粗心大意</p>
                            </div>
                            <div class="feature-item">
                                <h3>摩羯座</h3>
                                <p>务实、有责任感、耐心、传统、严肃</p>
                            </div>
                            <div class="feature-item">
                                <h3>水瓶座</h3>
                                <p>创新、独立、理性、人道主义、叛逆</p>
                            </div>
                            <div class="feature-item">
                                <h3>双鱼座</h3>
                                <p>敏感、直觉强、富有想象力、同情心、逃避现实</p>
                            </div>
                        </div>
                    </div>

                </div>

                <!-- 爱情匹配内容 -->
                <div id="love-content" class="tab-content">
                    <!-- 头部信息 -->
                    <div class="card">
                        <h1>星座爱情匹配</h1>
                        <p>探索不同星座之间的爱情兼容性与匹配度</p>
                    </div>

                    <!-- 星座爱情匹配度图表 -->
                    <div class="card">
                        <h2>星座爱情匹配度分析</h2>
                        <div class="chart-container" style="padding: 0 5px; max-width: 100%;">
                            <canvas id="loveChart" style="width: 100% !important;"></canvas>
                        </div>
                    </div>

                    <!-- 最佳情侣组合 -->
                    <div class="card">
                        <h2>最佳情侣组合</h2>
                        <div class="match-container">
                            <div class="match-item">
                                <div class="zodiac zodiac-1">白羊</div>
                                <div class="heart">❤️</div>
                                <div class="zodiac zodiac-2">狮子</div>
                                <div class="match-info">
                                    <div class="match-percentage">92%</div>
                                    <div class="match-bar">
                                        <div class="match-fill match-fill-aries-leo" style="width: 92%;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="match-item">
                                <div class="zodiac zodiac-1">金牛</div>
                                <div class="heart">❤️</div>
                                <div class="zodiac zodiac-2">处女</div>
                                <div class="match-info">
                                    <div class="match-percentage">88%</div>
                                    <div class="match-bar">
                                        <div class="match-fill match-fill-taurus-virgo" style="width: 88%;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="match-item">
                                <div class="zodiac zodiac-1">双子</div>
                                <div class="heart">❤️</div>
                                <div class="zodiac zodiac-2">天秤</div>
                                <div class="match-info">
                                    <div class="match-percentage">90%</div>
                                    <div class="match-bar">
                                        <div class="match-fill match-fill-gemini-libra" style="width: 90%;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="match-item">
                                <div class="zodiac zodiac-1">巨蟹</div>
                                <div class="heart">❤️</div>
                                <div class="zodiac zodiac-2">天蝎</div>
                                <div class="match-info">
                                    <div class="match-percentage">95%</div>
                                    <div class="match-bar">
                                        <div class="match-fill match-fill-cancer-scorpio" style="width: 95%;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 星座爱情建议 -->
                    <div class="card">
                        <h2>星座爱情建议</h2>
                        <div class="advice-list">
                            <div class="advice-item">
                                <h3>白羊座的爱情建议</h3>
                                <p>学会耐心倾听伴侣的想法，给彼此一些私人空间。</p>
                            </div>
                            <div class="advice-item">
                                <h3>金牛座的爱情建议</h3>
                                <p>尝试接受伴侣的不同观点，不要过于固执己见。</p>
                            </div>
                            <div class="advice-item">
                                <h3>双子座的爱情建议</h3>
                                <p>保持专注，不要因为好奇而忽视了伴侣的感受。</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 职业倾向内容 -->
                <div id="career-content" class="tab-content">
                    <!-- 头部信息 -->
                    <div class="card">
                        <h1>星座职业倾向</h1>
                        <p>探索不同星座适合的职业类型与发展方向</p>
                    </div>

                    <!-- 星座职业分布图表 -->
                    <div class="card">
                        <h2>星座职业领域分布</h2>
                        <div class="chart-container" style="padding: 0 5px; max-width: 100%;">
                            <canvas id="careerChart" style="width: 100% !important;"></canvas>
                        </div>
                    </div>

                    <!-- 各星座典型职业倾向 -->
                    <div class="card">
                        <h2>各星座典型职业倾向</h2>
                        <div class="career-scroll-container">
                            <div class="career-scroll-item" style="background-color: rgba(255, 59, 48, 0.05);">
                                <h3 style="color: #FF3B30;">白羊座</h3>
                                <p>企业家、运动员、军人、消防员、销售人员</p>
                            </div>
                            <div class="career-scroll-item" style="background-color: rgba(255, 149, 0, 0.05);">
                                <h3 style="color: #FF9500;">金牛座</h3>
                                <p>财务顾问、银行家、厨师、艺术家、农业专家</p>
                            </div>
                            <div class="career-scroll-item" style="background-color: rgba(255, 204, 0, 0.05);">
                                <h3 style="color: #FFCC00;">双子座</h3>
                                <p>记者、教师、翻译、公关、销售代表</p>
                            </div>
                            <div class="career-scroll-item" style="background-color: rgba(52, 199, 89, 0.05);">
                                <h3 style="color: #34C759;">巨蟹座</h3>
                                <p>护士、社工、厨师、历史学家、房地产经纪人</p>
                            </div>
                            <div class="career-scroll-item" style="background-color: rgba(255, 149, 0, 0.05);">
                                <h3 style="color: #FF9500;">狮子座</h3>
                                <p>演员、导演、企业家、管理者、政治家</p>
                            </div>
                            <div class="career-scroll-item" style="background-color: rgba(52, 199, 89, 0.05);">
                                <h3 style="color: #34C759;">处女座</h3>
                                <p>分析师、编辑、程序员、医生、科学家</p>
                            </div>
                            <div class="career-scroll-item" style="background-color: rgba(88, 86, 214, 0.05);">
                                <h3 style="color: #5856D6;">天秤座</h3>
                                <p>律师、外交官、设计师、公关、调解员</p>
                            </div>
                            <div class="career-scroll-item" style="background-color: rgba(175, 82, 222, 0.05);">
                                <h3 style="color: #AF52DE;">天蝎座</h3>
                                <p>侦探、心理学家、科学家、医生、调查记者</p>
                            </div>
                            <div class="career-scroll-item" style="background-color: rgba(255, 45, 85, 0.05);">
                                <h3 style="color: #FF2D55;">射手座</h3>
                                <p>旅行家、导游、教师、哲学家、探险家</p>
                            </div>
                            <div class="career-scroll-item" style="background-color: rgba(90, 200, 250, 0.05);">
                                <h3 style="color: #5AC8FA;">摩羯座</h3>
                                <p>工程师、经理、行政官员、会计、建筑师</p>
                            </div>
                            <div class="career-scroll-item" style="background-color: rgba(0, 122, 255, 0.05);">
                                <h3 style="color: #007AFF;">水瓶座</h3>
                                <p>科学家、发明家、设计师、程序员、社会工作者</p>
                            </div>
                            <div class="career-scroll-item" style="background-color: rgba(255, 149, 0, 0.05);">
                                <h3 style="color: #FF9500;">双鱼座</h3>
                                <p>艺术家、作家、音乐家、摄影师、慈善家</p>
                            </div>
                        </div>
                    </div>

                    <!-- 职业成功指数 -->
                    <div class="card">
                        <h2>星座职业成功指数</h2>
                        <div class="success-index">
                            <div class="index-item">
                                <div class="index-header">
                                    <span class="zodiac-name">狮子座</span>
                                    <span class="success-score">领导力: 95%</span>
                                </div>
                                <div class="index-bar">
                                    <div class="index-fill index-fill-leo" style="width: 95%;"></div>
                                </div>
                            </div>
                            <div class="index-item">
                                <div class="index-header">
                                    <span class="zodiac-name">处女座</span>
                                    <span class="success-score">工作效率: 90%</span>
                                </div>
                                <div class="index-bar">
                                    <div class="index-fill index-fill-virgo" style="width: 90%;"></div>
                                </div>
                            </div>
                            <div class="index-item">
                                <div class="index-header">
                                    <span class="zodiac-name">天秤座</span>
                                    <span class="success-score">团队协作: 92%</span>
                                </div>
                                <div class="index-bar">
                                    <div class="index-fill index-fill-libra" style="width: 92%;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>

                <!-- 生活方式内容 -->
                <div id="lifestyle-content" class="tab-content" style="padding: 0 20px;">
                    <!-- 头部信息 -->
                    <div class="card" style="margin-top: -20px;">
                        <h1>星座生活方式</h1>
                        <p>探索不同星座的生活习惯与价值观</p>
                    </div>

                    <!-- 星座生活方式图表 -->
                    <div class="card">
                        <h2>星座生活方式分析</h2>
                        <div class="chart-container" style="padding: 0 5px; max-width: 100%;">
                            <canvas id="lifestyleChart" style="width: 100% !important;"></canvas>
                        </div>
                    </div>

                    <!-- 生活习惯统计图表 -->
                    <div class="card">
                        <h2>生活习惯统计</h2>
                        <p>十二星座在健康、消费、作息等生活习惯方面的统计分析</p>
                        <div class="habits-grid" style="padding: 0 10px;">
                            <!-- 睡眠习惯图表 -->
                            <div class="habit-card">
                                <div class="habit-header">
                                    <span class="habit-icon">💤</span>
                                    <h3>睡眠习惯</h3>
                                </div>
                                <div class="habit-chart-container">
                                    <canvas id="sleepChart"></canvas>
                                </div>
                                <div class="habit-findings">
                                    <div class="finding-item">
                                        <span class="finding-icon">🌙</span>
                                        <span class="finding-text">摩羯座平均睡眠时间最长</span>
                                    </div>
                                    <div class="finding-item">
                                        <span class="finding-icon">🌊</span>
                                        <span class="finding-text">水瓶座最常熬夜</span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 饮食习惯图表 -->
                            <div class="habit-card">
                                <div class="habit-header">
                                    <span class="habit-icon">🍽️</span>
                                    <h3>饮食习惯</h3>
                                </div>
                                <div class="habit-chart-container">
                                    <canvas id="dietChart"></canvas>
                                </div>
                                <div class="habit-findings">
                                    <div class="finding-item">
                                        <span class="finding-icon">♍</span>
                                        <span class="finding-text">处女座注重健康饮食</span>
                                    </div>
                                    <div class="finding-item">
                                        <span class="finding-icon">♉</span>
                                        <span class="finding-text">金牛座最重视美食环境</span>
                                    </div>
                                </div>
                            </div>
                             
                            <!-- 运动习惯图表 -->
                            <div class="habit-card">
                                <div class="habit-header">
                                    <span class="habit-icon">🏃</span>
                                    <h3>运动习惯</h3>
                                </div>
                                <div class="habit-chart-container">
                                    <canvas id="exerciseChart"></canvas>
                                </div>
                                <div class="habit-findings">
                                    <div class="finding-item">
                                        <span class="finding-icon">♈</span>
                                        <span class="finding-text">白羊座运动频率最高</span>
                                    </div>
                                    <div class="finding-item">
                                        <span class="finding-icon">♋</span>
                                        <span class="finding-text">巨蟹座运动时间最少</span>
                                    </div>
                                </div>
                            </div>
                             
                            <!-- 消费习惯图表 -->
                            <div class="habit-card">
                                <div class="habit-header">
                                    <span class="habit-icon">💸</span>
                                    <h3>消费习惯</h3>
                                </div>
                                <div class="habit-chart-container">
                                    <canvas id="spendingChart"></canvas>
                                </div>
                                <div class="habit-findings">
                                    <div class="finding-item">
                                        <span class="finding-icon">♌</span>
                                        <span class="finding-text">狮子座最爱购物</span>
                                    </div>
                                    <div class="finding-item">
                                        <span class="finding-icon">♑</span>
                                        <span class="finding-text">摩羯座擅长储蓄</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
    
    <script>
        // Tab切换功能
        document.addEventListener('DOMContentLoaded', function() {
            // 获取所有tab按钮和内容区域
            const tabs = document.querySelectorAll('.tab');
            const tabContents = document.querySelectorAll('.tab-content');
            
            // 为每个tab按钮添加点击事件
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    const tabId = this.getAttribute('data-tab');
                    
                    // 移除所有tab的active状态
                    tabs.forEach(t => t.classList.remove('active'));
                    // 移除所有内容区域的active状态
                    tabContents.forEach(content => content.classList.remove('active'));
                    
                    // 添加当前tab和内容区域的active状态
                    this.classList.add('active');
                    document.getElementById(`${tabId}-content`).classList.add('active');
                    
                    // 根据当前tab初始化对应的图表
                    initTabCharts(tabId);
                });
            });
            
            // 初始化默认选中的tab图表
            initTabCharts('personality');
        });
        
        // 初始化指定tab的图表
        function initTabCharts(tabId) {
            // 调用对应的图表初始化函数
            switch(tabId) {
                case 'personality':
                    // 性格分析页面的图表初始化
                    initPersonalityChart();
                    break;
                case 'love':
                    // 爱情匹配页面的图表初始化
                    initLoveChart();
                    break;
                case 'career':
                    // 职业倾向页面的图表初始化
                    initCareerChart();
                    break;
                case 'lifestyle':
                    // 生活方式页面的图表初始化
                    initLifestyleCharts();
                    initHabitsCharts();
                    break;
            }
        }
    </script>
</body>
</html>